<template>
	<cl-dialog
		title="管理品牌"
		width="650px"
		:visible.sync="visible"
		:before-close="beforeClose"
		@close="close"
		:props="{
			top: '10vh',
			closeOnClickModal: false
		}"
	>
		<el-form ref="form" :model="form" :rules="rules" label-position="top" :disabled="saving">
			<el-form-item label="管理品牌" prop="is_assign" required>
				<el-radio-group v-model="form.is_assign" @change="isAssignChange">
					<el-radio :label="0">全部</el-radio>
					<el-radio :label="1">指定</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="指定品牌" prop="bra_ids" v-if="form.is_assign == 1">
				<el-checkbox-group v-model="form.bra_ids">
					<el-row>
						<el-col
							:span="browser.isMobile ? 12 : 8"
							v-for="(item, index) in brandList"
							:key="index"
						>
							<el-checkbox
								:label="item.bra_id"
								name="bra_ids"
								:disabled="item.bra_base == 1"
							>
								{{ item.bra_name }}
							</el-checkbox>
						</el-col>
					</el-row>
				</el-checkbox-group>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="close">关闭</el-button>
			<el-button type="primary" @click="submit" :loading="saving">确定</el-button>
		</template>
	</cl-dialog>
</template>
<script>
import { mapGetters } from "vuex";
export default {
	name: "manage-brand",
	data() {
		return {
			visible: false,
			form: {
				user_id: "",
				bra_ids: [],
				is_assign: 0
			},
			rules: {
				bra_ids: [{ required: true, message: "请选择品牌" }]
			},
			saving: false,
			brandList: [],
			main_bra: "", //主品牌
			isAssign: false
		};
	},
	computed: {
		...mapGetters(["browser"])
	},
	methods: {
		open(data = {}, isAssign = false) {
			this.visible = true;
			this.isAssign = isAssign;
			this.form.user_id = data.user_id;
			this.getBrandList(data.user_id);
		},
		beforeClose(done) {
			if (this.saving) return;
			done();
		},
		close() {
			if (this.saving) return;
			this.visible = false;
			this.reset();
		},
		reset() {
			this.saving = false;
			this.isAssign = false;
			this.$refs.form.resetFields();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				try {
					this.saving = true;
					const { user_id, bra_ids, is_assign } = this.form;
					let form = {
						user_id,
						bra_ids: is_assign == 0 ? "*" : bra_ids.join()
					};
					console.log(form);
					await this.$service.brand.setuserbrand(form);
					this.$message.success("操作成功");
					this.$emit("confirm");
					this.saving = false;
					this.close();
				} catch (error) {
					this.saving = false;
				}
			});
		},
		isAssignChange(v) {
			if (!v) {
				this.form.bra_ids = this.brandList.map(v => v.bra_id);
			} else {
				this.form.bra_ids = this.brandList
					.filter(v => v.choose == 1 || v.bra_id == this.main_bra)
					.map(v => v.bra_id);
			}
		},
		// 品牌
		async getBrandList(user_id) {
			this.brandList = [];
			if (!user_id) return;
			const { brands, main_brands } = await this.$service.brand.bizuserbrand({
				user_id
			});
			let list = brands || [];
			let bra_ids = list.filter(v => v.choose == 1).map(v => v.bra_id);
			this.form.bra_ids = bra_ids;
			this.form.is_assign = bra_ids.length == list.length ? 0 : 1;
			this.brandList = list;
			this.main_bra = main_brands ?? "";
			this.isAssign && ((this.form.is_assign = 1), (this.form.bra_ids = [this.main_bra]));
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.el-dialog__body {
		max-height: 70vh;
		overflow: auto;
	}
}
</style>
